<template>
  <div id="fishery">
    <el-card>
      <el-row>
        <el-col :span="4">
          <el-image :src="merchant.getIcon()" class="fishery_image" fit="fill">
            <template #placeholder>
              <div class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </template>
          </el-image>
        </el-col>
        <el-col :span="19" :offset="1">
          <el-row>
            <span class="name">{{ merchant.getName() }}</span>
          </el-row>
          <el-row>
            <span class="description">卖家所在地：{{ merchant.getPosition() }} | 卖家好评率：{{ merchant.getScore() }}</span>
          </el-row>
          <el-row>
            <div v-for="fresh in merchant.getFreshList()" :key="fresh" class="fresh">
              <el-col :span="3">
                <el-image :src="fresh.getIcon()" class="fresh_image" fit="fill">
                  <template #placeholder>
                    <div class="image-slot">
                      加载中<span class="dot">...</span>
                    </div>
                  </template>
                </el-image>
              </el-col>
              <el-col :span="16">
                <el-row>
                  <span class="fresh_word"> {{ fresh.getName() }}  {{ fresh.getPrice() }}元/斤 </span>
                </el-row>
                <el-row>
                  <span class="fresh_description"> {{fresh.getDescription()}}</span>
                </el-row>
              </el-col>
            </div>

          </el-row>
          <el-row v-if="merchant.getFreshList().length === 0">
            <el-row>该商家目前没有销售任何活品</el-row>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import Merchant from "@/pojo/Merchant";

export default {
  name: "Fishery",
  props: {
    merchant: Merchant
  }
};
</script>

<style scoped>
.fishery_image {
  width: 100%;
  height: 130px;
  padding-bottom: 10px;
}

.fresh_image {
  width: 50px;
  height: 50px;
  padding-bottom: 4px;
  padding-right: 5px;
}

.name {
  font-size: 20px;
  font-weight: 550;
  padding-bottom: 5px;
}

.fresh_word {
  font-size: 18px;
  font-weight: 500;
}

.fresh_description {
  font-size: 12px;
  font-weight: 400;
}

.fresh {
  float: left;
  width: 49%;
  padding-top: 10px;
}
</style>